<!--
 售后仓库录入
 -->
<template>
  <div style="padding: 2% 3%;">
    <el-row>
      <el-button-group>
        <el-button type="info" :size='size' @click="addShow" :disabled="toggleShow">新增</el-button>
        <el-button type="info" :size='size' @click="editShow" :disabled="!toggleShow">修改</el-button>
              <el-button type="success" style="float: right;" :size='size' @click="save">保存</el-button>
      </el-button-group>

      <!-- 修改下拉框 -->
      <template v-if="!toggleShow">
        <el-select style="margin-left: 1.25rem;" @change="editChange" :size="size" v-model="value" placeholder="请选择时间"
          clearable>
          <el-option v-for="item in options" :key="item.id" :label="item.beginDate" :value="item.id">
          </el-option>
        </el-select>
      </template>
      <el-button :size="size" icon="el-icon-close" @click="qingkong" v-if="!toggleShow" circle></el-button>
    </el-row>
    <!-- 新增 -->
    <el-row v-if="toggleShow">
      <el-divider></el-divider>
      <!-- 改成行类表单  :inline="true"  -->
      <el-form ref="form1" :inline="true" :rules="rules" :model="form" label-width="150px">
        <!-- 用br换行 或者div  -->
        <br />
        <el-form-item label="日期">
          <el-date-picker v-model="time1" type="datetime" disabled>
          </el-date-picker>
        </el-form-item>
        <div style="margin-top: 1.5rem;">
          <el-form-item label="入库" prop="enter">
            <el-select v-model="form.enterwarehouse" placeholder="请选择" style="width: 110%;">
              <el-option v-for="item in options3" :key="item.value" :label="item.enterwarehouse" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="配件">
            <el-select v-model="form.enterparts" placeholder="请选择" style="width: 110%;">
              <el-option v-for="item in options4" :key="item.value" :label="item.enterparts" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="金额(元)">
            <el-input-number :size="size" style="width:100%;" controls-position="right"  :step="1" :min="0"
              v-model="form.entermoney">
            </el-input-number>
          </el-form-item>
        </div>
        <div style="margin-top: 1.5rem;">
          <el-form-item label="出库" prop="come">
            <el-select v-model="form.comewarehouse" placeholder="请选择" style="width: 110%;">
              <el-option v-for="item in options3" :key="item.value" :label="item.comewarehouse" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="配件">
            <el-select v-model="form.comeparts" placeholder="请选择" style="width: 110%;">
              <el-option v-for="item in options4" :key="item.value" :label="item.comeparts" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="金额(元)">
            <el-input-number :size="size" style="width:100%;" controls-position="right"  :step="1" :min="0"
              v-model="form.comemoney">
            </el-input-number>
          </el-form-item>
        </div>
      </el-form>
      <el-divider></el-divider>

    </el-row>


    <!-- 修改 -->
    <el-row v-if="!toggleShow">
      <el-divider></el-divider>
      <span v-if="!value">请选择时间</span>
      <!-- 根据下拉框是否有值 显示 -->
      <div v-if="value">
        <el-form ref="form1" :inline="true" :rules="rules" :model="form" label-width="150px">
          <br />
          <el-form-item label="日期">
            <el-date-picker v-model="time1" type="datetime" disabled>
            </el-date-picker>
          </el-form-item>
          <div style="margin-top: 1.5rem;">
            <el-form-item label="入库">
              <el-select v-model="form.enterwarehouse" placeholder="请选择" style="width: 110%;">
                <el-option v-for="item in options3" :key="item.value" :label="item.enterwarehouse" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="配件">
              <el-select v-model="form.enterparts" placeholder="请选择" style="width: 110%;">
                <el-option v-for="item in options4" :key="item.value" :label="item.enterparts" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="金额(元)">
              <el-input :size="size" style="width:100%;" controls-position="right"  :step="1" :min="0"
                v-model="form.entermoney">
              </el-input>
            </el-form-item>
          </div>
          <div style="margin-top: 1.5rem;">
            <el-form-item label="出库">
              <el-select v-model="form.comewarehouse" placeholder="请选择" style="width: 110%;">
                <el-option v-for="item in options3" :key="item.value" :label="item.comewarehouse" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="配件">
              <el-select v-model="form.comeparts" placeholder="请选择" style="width: 110%;">
                <el-option v-for="item in options4" :key="item.value" :label="item.comeparts" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="金额(元)">
              <el-input :size="size" style="width:100%;" controls-position="right" :step="1" :min="0"
                v-model="form.comemoney">
              </el-input>
            </el-form-item>
          </div>
        </el-form>
        <el-divider></el-divider>
        <el-button type="primary" style="float: right;" :size='size' @click="save">保存</el-button>
      </div>
    </el-row>


  </div>
</template>

<script>
  export default {
    data() {
      return {
        size: 'medium',
        //切换新增修改显示
        toggleShow: true,
        time1: '',
        form: {
          time: '', //售后仓库录入时间
          comewarehouse: '', //出库类型
          enterwarehouse: '', //入库类型
          comeparts: '', //出库配件类别
          enterparts: '', //入库配件类别
          comemoney: '', //出库金额
          entermoney: '', //入库金额
          beginDate:'',    // 保存时间
        },
        //修改下拉框的值
        options: {},
        //修改下拉框选择之后存的值
        value: '',
        //能源类型
        options3: [{
          value: '原厂',
          label: '原厂'
        }, {
          value: '非原厂',
          label: '非原厂',
        }],
        options4: [{
          value: '油液类',
          label: '油液类'
        }, {
          value: '零件',
          label: '零件',
        }, {
          value: '养护品',
          label: '养护品',
        }, {
          value: '精品',
          label: '精品',
        }, {
          value: '轮胎',
          label: '轮胎',
        }, {
          value: '漆类',
          label: '漆类',
        }, {
          value: '低值易耗品',
          label: '低值易耗品',
        }],
        rules: {
          mest: [{
            required: true,
            message: '请选择保养套餐名称',
            trigger: 'blur'
          }],
        }
      }
    },
    methods: {

      getdatatime() { //默认显示今天
        this.time1 = new Date();
      },
      //切换v-if
      addShow() {
        console.log(this.form);
        this.toggleShow = true
        emptyObj(this.form)
        this.value = '';
      },
      editShow() {
        this.value = '';
        this.toggleShow = false
        emptyObj(this.form)
        this.editOptions();
      },
      //查找修改下拉框的值赋给options
      editOptions() {
        this.$ajax.post("AftersalesWarehouse/page", {}).then(res => {
          var result = res.data;
          if (result.success) {
            this.options = result.data.rows
          }
        })
      },

      //保存
      save() {
        if (this.form.comewarehouse || this.form.enterwarehouse) {
          if (this.form.comemoney || this.form.entermoney) {
            if (this.form.comeparts || this.form.enterparts) {
              this.$refs.form1.validate(valid => {
                if (valid) {
                  this.form.time = this.time1;
                  this.$ajax.post("AftersalesWarehouse/save1", this.form).then(res => {
                    var result = res.data;
                    if (result.success) {
                      this.$notify({
                        title: '提示',
                        message: '数据保存成功',
                        type: 'success',
                        position: 'bottom-right'
                      });
                      emptyObj(this.form)
                      this.editOptions();
                      this.value = '';
                    }
                  })
                }
              })
            } else {
              this.$notify({
                title: '提示',
                message: "金额必填",
                type: 'warning',
                position: 'bottom-right'
              });

            }
          } else {
            this.$notify({
              title: '提示',
              message: "库配件类别",
              type: 'warning',
              position: 'bottom-right'
            });
          }
        } else {
          this.$notify({
            title: '提示',
            message: "出入库必填",
            type: 'warning',
            position: 'bottom-right'
          });
        }
      },

      //选择下拉框
      editChange() {
        this.$ajax.post("AftersalesWarehouse/findbyId", {
          id: this.value
        }).then(res => {
          var result = res.data;
          if (result.success) {
            this.form = result.data;
            this.form.sgrq = new Date(this.form.sgrq);
          }
        })
      },
      //点击下拉框×
      qingkong() {
        this.value = '';
      }
    },
    mounted() {
      let that = this;
      that.getdatatime()
    }
  }

  function emptyObj(obj) {
    if (obj.file) {
      obj.file = ""
    }
    if (obj.sgrq) {
      obj.sgrq = ""
    }
    for (var key in obj) {
      var o = obj[key];
      if (o instanceof Object) {
        emptyObj(o);
      } else {
        obj[key] = '';
      }
    }
  }
</script>

<style>
</style>
